<template>
	<div class="task-preview-container">
		<div class="task-details">
			<div class="task-info">
				<span class="info-label">编程语言:</span>
				<span class="info-value">{{taskItem.l_name}}</span>
			</div>
			<div class="task-info">
				<span class="info-label">模块名称:</span>
				<span class="info-value">{{taskItem.m_name}}</span>
			</div>
			<div class="task-info">
				<span class="info-label">难易程度:</span>
				<span class="info-value">{{taskItem.completed}}</span>
			</div>
		</div>
		<div class="task-content">{{taskItem.detail}}
<pre><code>public static void main(String[] args){
    System.out.println("hello world!");
}</code></pre>
		</div>

		<!-- 任务答案和列表 -->
		<div class="flex gap-2 task-code-list">
			<el-check-tag 
				:checked="activeIndex === idx"
				type="primary" 
				@click="setActive(idx)"
				v-for="(task, idx) in taskList"
				:key = "idx"
			>{{task.name}}</el-check-tag>
		</div>
		<!-- 显示当前选中同学的答案 -->
		<pre class="task-answer"><code>{{ currentAnswer }}</code></pre>
		<!-- 固定底部检查按钮 -->
		<div class="check-btn-wrapper">
			<el-button type="primary" @click="handleCheck">检查</el-button>
		</div>
	</div>
</template>

<script>
import HeaderNav from '@/components/HeaderNav.vue'
import TaskContainer from '@/components/TaskContainer.vue'
import TaskCode from '@/components/TaskCode.vue'
import API from '@/api/index.js'
import Token from '@/api/token.js'

export default {
	components: {
		HeaderNav,
		TaskContainer,
		TaskCode,
	},
	props: {
		taskId: Number,
		taskItem: Object
	},
	data() {
		return {
			activeIndex: 0, // 当前高亮的同学下标
			task: {
				checked: false,
				code: "",
			},
			taskList: [],
			getuser: Token.getUser()
		}
	},
	computed: {
		currentAnswer() {
			if (this.taskList.length > 0 && this.activeIndex >= 0) {
				return this.taskList[this.activeIndex].answer;
			}
			return '';
		}
	},
	created() {
		this.getAnswerAnduser();
	},
	methods: {
		getAnswerAnduser(){
			console.log(this.taskId, this.taskItem)
			API.getAnswerAnduser({
				task_id: this.taskId,
				clazz_id: this.getuser.clazz_id,
				name: this.getuser.name
			})
			.then(ret=> {
				this.taskList = ret.data
				this.activeIndex = 0; // 默认第一个高亮
				console.log("存在答案的学生：",this.taskList)
			})
		},
		setActive(idx) {
			this.activeIndex = idx;
		},
		handleCheck() {
			// 拿到当前选中学生的id
			const student = this.taskList[this.activeIndex];
			if (student && student.id) {
				// 进行学生任务的检查逻辑
				// this.$message.success(`已选中学生ID: ${student.id}`);
				API.checkStudentTask({
					studentId: student.id,
					taskId: this.taskId
				})
				.then(ret=>{
					this.$message.success(`检查成功`)
					this.getAnswerAnduser();
				})
			} else {
				this.$message.warning('没有学生可进行检查');
			}
		},
	},
	watch: {
		taskId(newId){
			this.getAnswerAnduser()
		}
	}
}
</script>

<style scoped>
.task-preview-container {
	margin: 0 auto;
	padding: 20px;
	background-color: #f9f9f9;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	height: 700px;
	overflow: auto;
	position: relative;
}

.task-header {
	text-align: center;
	margin-bottom: 20px;
}

.task-title {
	font-size: 28px;
	font-weight: bold;
	color: #333;
}

.task-details {
	display: flex;
	justify-content: space-between;
	line-height: 40px;
	background-color: #fff;
	margin-bottom: 10px;
	border-radius: 8px;
}

.task-info {
	flex: 1;
	text-align: center;
}

.info-label {
	font-weight: bold;
	color: #555;
	margin-right: 10px;
}

.info-value {
	color: #777;
}

.task-content {
	background: #fff;
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.task-content pre:has(>code) {
	background: #F0F2F5;
	color: #333;
	padding: 10px;
	border-radius: 5px;
	overflow-x: auto;
}
.task-content code {
	font-family: 'Courier New', Courier, monospace;
	font-size: 14px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.task-code-list {
	padding: 20px 0 ;
}

.task-answer {
	background-color: #fff;
    padding: 10px 20px ;
    border-radius: 5px;
    overflow-x: auto;
    line-height: 1.5;
    margin: 10px 0;
    tab-size: 3;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.task-answer > code {
	font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.1;
}

.el-check-tag {
	margin: 0 3px;
	background-color: #e9e9eb;
}

.el-check-tag[disabled]{
	background-color: #f4f4f5;
}

.el-check-tag[disabled]:hover {
	cursor: not-allowed;
}

.check-btn-wrapper {
	position: absolute;
	bottom: 20px;
	right: 30px;
	z-index: 10;
}

@media (max-width: 800px) {
  .task-details {
    flex-direction: column !important;
    gap: 4px !important;
    line-height: 24px !important;
    padding: 4px 0px 4px 4px !important;
  }
  .task-info {
    text-align: left !important;
    padding-left: 0 !important;
    font-size: 13px !important;
    margin: 0 !important;
  }
}
</style>